<template>
  <div id="history">
    <Head />
    <H1 style="margin-left: 156px"
      ><i class="iconfont icon-lishijilu" style="font-size: 33px"></i>
      历史记录</H1
    >
    <div class="history_list">
      <div class="right">
        <div class="product_show" v-for="item in responseAll" :key="item.id">
          <div class="show_img">
            <img
              referrerpolicy="no-referrer"
              :src="item.coverImage"
              @click="selectDetail(item.id)"
            />
          </div>
          <div class="title" :title="item.title">
            {{ item.title }}
          </div>
          <div class="description" :title="item.description">
            {{ item.description }}
          </div>

          <div class="last">
            <span><i class="el-icon-user-solid"></i></span>
            <span @click="routerUser(1)">说了一半的话</span>
            <span style="margin-left: 15px">{{ item.createTime }}</span>
            <div class="add_time">观看时间：{{ item.viewCreateTime }}</div>
          </div>
          <div class="delete" @click="deleteHistory(item.viewId)">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { onMounted } from "vue";
import Head from "@/components/head.vue";
export default {
  name: "history",
  components: {
    Head,
  },
  data() {
    return {
      responseAll: [],
      pageNum: 1, // 当前页码
      isLoading: false, // 是否正在加载数据
    };
  },
  methods: {
    // 获取全部商品
    getAllProduct() {
      let url = "/api/resources/views/list";
      this.$http.get(url).then((res) => {
        this.responseAll = res.data.data;
        console.log(res.data.data);
      });
    },
    // 跳转到商品详情页
    selectDetail(id) {
      this.$router.push({
        path: "/play",
        query: {
          resourcesId: id,
        },
      });
      //添加到历史记录
      let url = "/api/resources/views/insert";
      this.$http.post(url, { resourcesId: id }).then((res) => {
        if (res.data.code === 200) {
          console.log("添加成功");
        } else {
          console.log("添加失败");
        }
      });
    },
    // 移除历史记录
    deleteHistory(id) {
      //  提示删除信息
      this.$confirm("是否删除该历史记录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认删除
          let url = "/api/resources/views/delete/" + id;
          this.$http.delete(url).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getAllProduct();
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          // 取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getAllProduct();
  },
};
</script>
    
    <style lang="less" scoped>
#history {
  .history_list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;

    .right {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      width: 100%;
      max-width: 1225px;
    }
  }

  .product_show {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .show_img {
      width: 100%;
      height: 210px;
      overflow: hidden;
      border-radius: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .title {
      padding: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* 不换行 */
    }

    .description {
      padding: 10px;
      font-size: 14px;
      color: #666;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* 不换行 */
    }

    .last {
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      font-size: 14px;
      color: #666;

      .add_time {
        // color: red;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* 不换行 */
      }
    }

    .delete {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ff4d4f;
      color: #fff;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      padding: 8px;
      margin: 10px;
      text-align: center;
      transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;

      &:hover {
        background: #d9363e;
        transform: scale(1.1);
      }

      &:active {
        transform: scale(0.9);
      }
    }
  }
}

/deep/ .head_center {
  display: none;
}
/deep/ .header {
  height: 50px;
}
</style>